<template>
  <div>
    <el-form :model="form">
        form:{{form}}
        <el-form-item label="角色名称" label-width="120px" :rules="[
      { required: true}]">
          <el-input v-model="form.rolename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" label-width="120px">
          <template>
            <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :props="{children: 'children',  label: 'title'}"
            ref="tree">
          </el-tree>
          </template>
        </el-form-item>
      
        <el-form-item label="状态" label-width="120px">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
        </el-form-item>
        <el-form-item label-width="120px">
          <el-button type="primary" @click="commit">{{$route.path == '/role/add'? '添加':'修改'}}</el-button>
        </el-form-item>

      </el-form>
      
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import {reqroleadd,reqroleedit,reqroleinfo} from '../../../http/api';
import { successAlert } from '../../../utils/alert';
export default {
  computed: {
    ...mapGetters({
      data:'menu_Arr',
      user_info:'user_info'
    })
  },
  data() {
    return {
        form: {
        rolename: "",
        menus: "",
        status: 1
      },
    };
  },
  activated() {
      if(this.data){
          this.set_menuArr();
      };
      if(this.$route.path !== "/role/add"){
      // console.log(this.$route);
      reqroleinfo({ id:this.$route.params.id }).then((res) => {
            if (res.data.code === 200) {
                this.form = res.data.list;
                // 给树赋值
                this.$refs.tree.setCheckedKeys(JSON.parse(this.form.menus))
            }
        }).catch((err) => {
            console.log('请求失败-----err:' + err);
        })
    }
  },
  beforeRouteLeave(to,from,next){
    
    if(from.path !== '/role/add'){
        this.form = {
        rolename: "",
        menus: "",
        status: 1
    }
    };
    next()
},
  methods: {
    ...mapActions({
        set_menuArr:'set_menuArr',
        set_userInfo:'set_userInfo'
    }),
   changePid(){
      if(this.form.pid===0){
        this.form.type=1
      }else{
        this.form.type=2
      }
   },
   commit(){
       // 将树的值取出,赋值给form
        this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());
     if(this.$route.path === '/role/add'){
        
       reqroleadd(this.form).then(res => {
        if(res.data.code===200){
          //弹成功
          successAlert(res.data.msg);
          this.form = {
              rolename: "",
              menus: "",
              status: 1
          }
          //返回菜单管理
          this.$router.push('/role');
        }
      })
     }else{
       
       this.form.id = this.$route.params.id;
       reqroleedit(this.form).then(res => {
        if(res.data.code===200){
          //弹成功
          successAlert(res.data.msg);
          // 如果id是当前用户的roleid退出登录
          
          if(this.form.id == this.user_info.roleid){
            // 清空用户信息
            this.set_userInfo({});
            // 返回登录界面
            this.$router.replace('/login');
            return
          }
          //返回菜单管理
          this.$router.push('/role');
        }
      })
     }
   }
  }
};
</script>
<style scoped lang="less">
</style>